<template>
  <div class="wrap-lotter">
    <div class="lottery-head">
      <van-nav-bar
        title="幸运抽奖"
        placeholder
        fixed
        left-arrow
        @click-left="back"
      >
        <template #right> <van-icon name="question-o" size="24" /> </template
      ></van-nav-bar>
    </div>
    <div class="lottery-cont">
      <div class="cont-title">
        <img src="@img/xydzp.png" alt="" />
      </div>
      <div class="cont-zp">
        <aaa />
        <!-- <img src="@img/cjZp.png" alt=""> -->
      </div>
    </div>
  </div>
</template>

<script setup name="Lottery">
import aaa from "./aaa.vue";
</script>

<style scoped lang="scss">
.wrap-lotter {
  background: url("@img/lotterBg.png") no-repeat;
  background-size: 100% 100%;
  height: 100vh;
  ::v-deep {
    .van-nav-bar__left,
    .van-nav-bar__title,
    .van-nav-bar__right {
      color: #ffffff;
    }
    .van-hairline--bottom:after {
      border-bottom-width: 0;
    }
  }
  .lottery-cont {
    text-align: center;
    .cont-title {
      text-align: center;
      margin-top: 26px;
    }
    .cont-zp {
      width: 100%;
      display: grid;
      height: calc(100vh - 76.4px - 46.3px - 26px);
    }
  }
}
</style>
